<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{height:height+'px',background:'rgba(255,255,255,'+opcity+')'}">
			<view class="tui-header" :style="{paddingTop:top+'px', opacity:opcity}">
				商品详情
			</view>
			<view class="tui-header-icon" :style="{marginTop:top+'px'}">
				<view class="tui-icon tui-icon-arrowleft tui-icon-back" :style="{color:opcity>=1?'#000':'#fff',background:'rgba(0, 0, 0,'+iconOpcity+')'}" @tap="back"></view>
			</view>
		</view>
		<!--header-->

		<!--banner-->
		<view class="tui-banner-swiper">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" :style="{height:scrollH + 'px'}" @change="bannerChange">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item" class="tui-slide-image" :style="{height:scrollH+'px'}" />
					</swiper-item>
				</block>
			</swiper>
			<tui-tag type="translucent"  size="small">{{bannerIndex+1}}/{{banner.length}}</tui-tag>
		</view>

		<!--banner-->

		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{goodsInfo['info']['goods_name']}}</view>
				</view>
				
				<view class="goods-attribute">
					<view class="goods-attribute-left" style="width: 75%;">
						<view class="tui-original-price tui-gray">
							<text>{{goodsInfo['info']['goods_attr']}}</text>
						</view>
						<view class="tui-pro-pricebox tui-padding">
							<view class="tui-pro-price">
								<view>￥{{formatPrice(goodsInfo['info']['goods_price'])}}</view>
							</view>
						</view>
					</view>
					<view class="goods-attribute-right">
						<view class="goods-attribute-right-add">
							<tui-icon name="offline" size="24" color="#0a8fe2" @tap="delCart(goodsInfo['info'])"></tui-icon>
							 <text class="goods-attribute-right-text">{{goodsInfo['info']['goodsNum']}}</text>
							<tui-icon name="add" size="21" color="#0a8fe2" @tap="addCart(goodsInfo['info'])"></tui-icon>
						</view>
						<view class="goods-attribute-right-kucun">
							库存
							<text class="tui-padding-small" v-if="goodsInfo['info']['goods_stock'] >=0">{{goodsInfo['info']['goods_stock']}}</text>
							<text v-else>不限</text>
						</view>
					</view>
				</view>
			
			</view>
			<view class="tui-product-img tui-radius-all" v-if="goodsInfo['info']['goods_details']">
				{{goodsInfo['info']['goods_details']}}
			</view>
			<view class="tui-safearea-bottom"></view>
		</view>
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiBadge from "@/components/badge/badge"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiButton from "@/components/button/button"
	import tuiToast from "@/components/extend/toast/toast"

	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiBadge,
			tuiNomore,
			tuiButton,
			tuiToast
			
		},
		data() {
			return {
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				banner: [
					'/static/my/goodsBg.png'
				],
				bannerIndex: 0,
				value: 1,
				collected: false,
				parm: {},
				goodsInfo:{
					info:{goods_price:0}
				},
				goodsCart: [],
				conditions: 0,
			}
		},
		onLoad: function(options) {
			this.parm = options
			this.loadData();
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.width = obj.left || res.windowWidth;
						this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
						this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
						this.scrollH = res.windowWidth
					}
				})
			}, 50)
			this.goodsCart = uni.getStorageSync(this.tui.goodsPrefix() + this.parm.jielong_id);
			
		},
		methods: {
			delCart: function(goods){
				if(this.goodsInfo['info']['goodsNum'] == 0){
					return false
				}
				this.tui.addPublicCart(goods,true)
				this.goodsCart = uni.getStorageSync(this.tui.goodsPrefix() + goods.jielong_id);
				this.getCart(this.goodsInfo)
				// let params = {
				// 	title: '操作成功',
				// 	imgUrl: "/static/toast/check-circle.png",
				// 	icon: true
				// };
				// this.$refs.toast.show(params);
			},
			addCart: function(goods){
				this.tui.addPublicCart(goods,false)
				this.goodsCart = uni.getStorageSync(this.tui.goodsPrefix() + goods.jielong_id);
				this.getCart(this.goodsInfo)
				// let params = {
				// 	title: '操作成功',
				// 	imgUrl: "/static/toast/check-circle.png",
				// 	icon: true
				// };
				// this.$refs.toast.show(params);
			},
			formatPrice: function(fee){
				return this.tui.centsToYuan(fee)
			},
			getCart: function(res){
				if(this.goodsCart.length == 0){
					this.goodsInfo['info']['goodsNum'] = 0;
					return false;
				}
				let status = 1
				for(let i = 0; i < this.goodsCart.length; i++){
					if(this.goodsCart[i]['goods_id'] == res['info']['goods_id']){
						if(this.goodsCart[i]['goodsNum'] > 0){
							this.goodsInfo['info']['goodsNum'] = this.goodsCart[i]['goodsNum']
						}else{
							this.goodsInfo['info']['goodsNum'] = 0
						}
						status = 2;
					}
				}
				if(status == 1){
					this.goodsInfo['info']['goodsNum'] = 0
				}
			},
			loadData: function(){
				this.tui.request('jielong/goodsDetail',this.parm).then((res) => {
					if(res.code == '0000'){
						this.goodsInfo = res
						if( res['info'].goods_files){
							this.banner = JSON.parse(res['info'].goods_files);
						}
						this.getCart(res);
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current
			},
			previewImage: function(e) {
				let index = e.currentTarget.dataset.index;
				uni.previewImage({
					current: this.banner[index],
					urls: this.banner
				})
			},
			back: function() {
				this.conditions = 1;
				let that =this;
				uni.navigateBack({
				  success (res) {
					getApp().globalData.Successfulorder = 4;
				    let page = getCurrentPages().pop()
				    if (page == undefined || page == null) {
				      return
				    }
					console.log(11);
				    page.onLoad({id:that.parm.jielong_id})
				  }
				})
				// uni.navigateBack()
			},
			change: function(e) {
				this.value = e.value
			},
		},
		onPageScroll(e) {
			console.log('普通退出');
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity)
		},
		onUnload() {
			if(this.conditions == 0){
				getApp().globalData.Successfulorder = 5;
			}
		},
	}
</script>

<style>
	/* icon 也可以使用组件*/
	@import "../../static/style/icon.css";
	page {
		background: #f7f7f7;
	}

	.container {
		padding-bottom: 110rpx;
	}
	.goods-attribute{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9998;
	}

	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 99999;
	}



	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}


	.tui-icon {
		border-radius: 16px;
	}


	.tui-icon-back {
		height: 32px !important;
		width: 32px !important;
		display: block !important;
	}



	.tui-banner-swiper {
		position: relative;
	}

	.tui-banner-swiper .tui-tag-class {
		position: absolute;
		color: #898989;
		background: #FFFFFF;
		padding: 8rpx 20rpx;
		bottom: 30rpx;
		left: 30rpx;
		font-size:26rpx;
		border-radius: 25rpx !important;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	/*顶部菜单*/

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up {
		position: relative;
		display: inline-block;
		left: 50%;
		transform: translateX(-50%);
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-gray {
		color: #999;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		margin-top: 20rpx;
		/* border-radius: 24rpx; */
		overflow: hidden;
		padding: 30rpx ;
		background: #FFFFFF;
		line-height: 55rpx;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
	}

	.tui-product-title {
		background: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #ff201f;
		font-size: 35rpx;
		font-weight: 500;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		align-items: center;
	}

	.tui-pro-price .tui-tag-class {
		transform: scale(0.7);
		transform-origin: center center;
		line-height: 24rpx;
		font-weight: normal;
	}
	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		margin: 10rpx auto;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 10rpx;
	}

	.tui-product-img {
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}
	.goods-attribute-right{
		font-size: 28rpx;
	}
	.goods-attribute-right-add{
		padding-right: 25rpx;
	}
	.goods-attribute-right-kucun{
		font-size: 26rpx;
		color: #989898 !important;
		padding-top: 10rpx;
		text-align: center;
	}
	.goods-attribute-right-text{
		padding: 0px 15rpx;
	}
	.tui-padding-small{
		padding: 0px 5rpx;
		font-size: 30rpx;
	}
	
</style>
